<template>
  <div class="userservice">
    <a-card>
      <a-form :form="form">
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="设备编号" :label-col="{ span: 7 }" :wrapper-col="{ span: 16,offset:1 }">
              <a-input
                placeholder="请输入"
                v-decorator="['devicecode', {rules: [{ required: false, message: '请输入设备编号!' }]}]"
              />
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item label="所属网点" :label-col="{ span: 7 }" :wrapper-col="{ span: 16,offset:1 }">
              <a-select style="width:100%" v-decorator="['branch']" placeholder="全部">
                <a-select-option value>全部</a-select-option>
                <a-select-option
                  v-for="item in branchName"
                  :key="item.id"
                  :value="item.id"
                >{{item.branchName}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item label="所属点位" :label-col="{ span: 7 }" :wrapper-col="{ span: 16,offset:1 }">
              <a-input
                placeholder="请输入"
                v-decorator="['pointcode', {rules: [{ required: false, message: '请输入点位名称' }]}]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="故障类型" :label-col="{ span: 7 }" :wrapper-col="{ span: 16,offset:1 }">
              <a-select
                style="width:100%"
                v-decorator="[
                          'fault',
                            {rules: [{ required: false, message: '请输入此故障类型' }]}
                            ]"
                placeholder="全部"
              >
                <a-select-option :value="1">相机模块</a-select-option>
                <a-select-option :value="4">网络模块</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item label="报修时间" :label-col="{ span: 7 }" :wrapper-col="{ span: 16,offset:1 }">
              <a-range-picker
                style="width: 100%"
                v-decorator="['rangeConfig']"
                show-time
                format="YYYY-MM-DD HH:mm:ss"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8" :style="{ textAlign: 'right' }">
            <a-button type="primary" @click="usersearch($event)">查询</a-button>
            <a-button type="dashed" style="margin:0 2%" @click="userExport()">导出</a-button>
            <a-button @click="userReset()">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </a-card>

    <!-- 表格模块区域 -->
    <a-card style="margin-top:2%;">
      <a-table
        :columns="columns"
        :dataSource="data"
        :pagination="pagination"
        @change="handleTableChange"
        :rowKey="record => record.id"
        :bordered="true"
      >
        <template slot="module" slot-scope="text,record">
          <div>{{record.failureModule==1?"相机模块":record.failureModule==4?"网络模块":""}}</div>
        </template>
        <template slot="detail" slot-scope="text,record">
          <div @click="repairedetail(text,record)" class="blue">详情</div>
        </template>
      </a-table>
    </a-card>
    <!-- 详情得弹出层 -->
    <a-modal :visible="visible" title="详情" @ok="addOk" @cancel="addCancel" :width="700">
      <a-form :form="form">
        <a-form-item label="设备编号" :label-col="{ span: 3}" :wrapper-col="{ span: 16, offset: 1}">
            {{ devCodeNo }}
        </a-form-item>
        <a-form-item label="所属网点" :label-col="{ span: 3}" :wrapper-col="{ span: 16, offset: 1}">
            {{ branchName }}
          </a-form-item>
        <a-form-item label="点位名称" :label-col="{ span: 3}" :wrapper-col="{ span: 16, offset: 1}">
             {{ posName }}
          </a-form-item>
        <a-form-item label="点位地址" :label-col="{ span: 3}" :wrapper-col="{ span: 16, offset: 1}">
             {{ posAddress }}
          </a-form-item>
        <a-form-item label="故障类型" :label-col="{ span: 3}" :wrapper-col="{ span: 16, offset: 1}">
          {{  failureModuleName }}
          </a-form-item>
        <a-form-item label="备注" :label-col="{ span: 3}" :wrapper-col="{ span: 16, offset: 1}"></a-form-item>
        <a-form-item label="图片" :label-col="{ span: 3}" :wrapper-col="{ span: 16, offset: 1}">
          <!-- <img :src="this.datalist.image"> -->
          </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: "设备编号",
    dataIndex: "devCode",
    scopedSlots: { customRender: "deviceCodeNo" },
    align: "center"
  },
  {
    title: "所属网点",
    dataIndex: "branchName",
    scopedSlots: { customRender: "pointbranches" },
    align: "center"
  },
  {
    title: "点位名称",
    dataIndex: "posName",
    scopedSlots: { customRender: "pointnameNo" },
    align: "center"
  },
  {
    title: "报修人",
    dataIndex: "telephone",
    scopedSlots: { customRender: "repairepeopleNo" },
    align: "center"
  },
  {
    title: "故障类型",
    dataIndex: "failureModule",
    scopedSlots: { customRender: "module" },
    align: "center"
  },
  {
    title: "保修时间",
    dataIndex: "createTime",
    scopedSlots: { customRender: "deviceCodeNo" },
    align: "center"
  },
  {
    title: "操作",
    dataIndex: " ",
    scopedSlots: { customRender: "detail" },
    align: "center"
  }
];
const data = [
  {
    key: "1",
    operation: "详情"
  }
];
export default {
  name: "userservice",
  data() {
    return {
      form: this.$form.createForm(this),
      data:[],
     
      columns,
      branchName: [],
      selectid: "",
      picture:'',
      devCodeNo:'',
      branchName:'',
      posName:'',
      posAddress:'',
      failureModuleName:'',

      // bid:'',
      visible: false,
      pagination: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["2", "4", "8", "10", "12"],
        showTotal: (total, range) => {
          return `${range[0]}-${range[1]} 共${total}条`;
        },
        pageSize: 2,
        defaultCurrent: 1,
        current: 1,
        total: 5
      }
    };
  },
  methods: {
    handleTableChange(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      pager.total = pagination.total;
      this.pagination = pager;
      this.usersearch();
    },
    addOk(e) {
      this.visible = false;
    },
    addCancel(e) {
      this.visible = false;
    },
    repairedetail(text,record) {
      this.visible = true;
      this.repairId=record.id;
      console.log(this.repairId);
      this.redetail(this.repairId)
    },
    //查询列表的接口
    usersearch($event) {
      var values = this.form.getFieldsValue();
      //      this.branchName.forEach( (element, index)=> {
      //           this.selectid=element.id

      // });
      //     console.log(this.selectid);
      if($event){
        this.pagination.current=1;
      }

      if (values.rangeConfig == undefined) {
        values.rangeConfig == undefined;
      } else {
        this.startCreateTime = this.$moment(values.rangeConfig[0]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        this.endCreateTime = this.$moment(values.rangeConfig[1]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      this.axios
        .post(this.baseUrl + "/userRepair/getByCondition ", {
          loginToken: this.$store.state.loginToken,
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize,
          startTime: this.startCreateTime,
          endTime: this.endCreateTime,
          branchId: values.branch,
          devCode: values.devicecode,
          posName: values.pointcode,
          failureModule: values.fault
        })
        .then(response => {
          console.log(response);
          this.data = response.data.data.list;
          this.pagination.total = response.data.data.total;
          this.pagination.pageSize = response.data.data.pageSize;
          this.pagination.current = response.data.data.pageNum;
        });
    },
    //重置操作
    userReset() {
      this.form.resetFields();
      this.startCreateTime = "";
      this.endCreateTime = "";
    },
    //导出操作
    userExport() {
      var values = this.form.getFieldsValue();
      if (values.applyTime == undefined) {
        values.applyTime == undefined;
      } else {
        this.startCreateTime = this.$moment(values.applyTime[0]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        this.endCreateTime = this.$moment(values.applyTime[1]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      this.axios({
        method: "post",
        url: this.baseUrl + "/order/exportGoodsReturn",
        data: {
          loginToken: this.$store.state.loginToken,
          startTime: this.startCreateTime,
          endTime: this.endCreateTime,
          branchId: values.branch,
          devCode: values.devicecode,
          posName: values.pointcode,
          failureModule: values.fault
        },
        responseType: "arraybuffer"
      }).then(res => {
        // console.log(res);
        if (res.status == "200") {
          const aLink = document.createElement("a");
          let blob = new Blob([res.data], {
            type: "application/vnd.ms-excel"
          });
          aLink.href = URL.createObjectURL(blob);
          aLink.download = "报修列表";
          aLink.click();
          document.body.appendChild(aLink);
        }
      });
    },
    //点位接口
    listInit() {
      this.axios
        .post(this.baseUrl + "/pos/listInit", {
          loginToken: this.$store.state.loginToken
        })
        .then(response => {
          console.log(response);
          //  console.log(response.data.data)
          this.branchName = response.data.data.branchName;
          console.log(this.branchName);
          // this.bid=response.data.data.branchName[0].id;
          // console.log(this.bid);
        })
        .catch(error => {
          console.log(error);
        });
    },
    //详情得接口
    redetail(repairId) {
      var values=this.form.getFieldsValue();
       this.axios
       .post(this.baseUrl+"/userRepair/getById",{
             loginToken: this.$store.state.loginToken,
             repairId:repairId,
             

       })
       .then(response=>{
         console.log(response);
         this.devCodeNo=response.data.data.devCode;
         this.branchName=response.data.data.branchName;
         this.posName=response.data.data.posName;
         this.posAddress=response.data.data.posAddress;
         this.failureModuleName=response.data.data.failureModuleName;

       
        
       })
    }
  },

  created() {
    this.listInit();
    this.usersearch();
  }
};
</script>

<style>
</style>
